/**
* @author: LiYaHui
* @date: 2021-11-02
* @description: 处理、详情
*/
<template>
  <Dialog
    :value="value"
    @input="$emit('input', false)"
    @cancel="onCancel"
    @closed="$emit('closed')"
    title="发现预警"
    width="8rem"
  >

    <div class="detail-content">
      <div class="content-title">
        <ul class="title">
          <li>预警区域</li>
          <li>预警项</li>
          <li>摄像头名称</li>
          <li>时间</li>
        </ul>
        <div class="line"></div>
        <ul class="content">
          <li>{{ titles.locationName }}</li>
          <li>{{ titles.algorithmName }}</li>
          <li>{{ titles.videoName }}</li>
          <li>{{ getTime }}</li>
        </ul>
      </div>
      <div class="content-video">
        <VideoDisc class="video-item video" :src="data.alarmVideoPath" />
        <img class="video-item image" :src="data.alarmImagePath" alt="">
      </div>
    </div>
    <div slot="footer">
      <div class="dialog-footer" v-if="(data.status === 1 || data.status === 3) && data.level == 1">危险行为，已自动发送短信通知</div>
      <div class="dialog-footer" v-else-if="(data.status === 1 || data.status === 3) && data.level != 1">
        <Button type="primary" @click="onClickDispose(3)">预警（发短信通知相关人）</Button>
        <Button @click="onClickDispose(2)">不预警（不发送消息）</Button>
      </div>
      <div class="dialog-footer" v-else></div>

    </div>
  </Dialog>
</template>

<script>
import Dialog from './Dialog'
import VideoDisc from './VideoDisc'
import * as api from '@/api/alarm'
import moment from 'moment'
export default {
  name: 'Detail',
  components: {
    Dialog,
    VideoDisc
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    titles: {
      type: Object,
      default: () => ({})
    },
    data: {
      type: Object,
      default: () => ({})
    },
    callback: Function
  },
  data () {
    return {

    }
  },
  computed: {
    getTime () {
      if (this.titles.createTime) {
        return moment(this.titles.createTime).format('YYYY-MM-DD HH:mm:ss')
      }
      return ''
    }
  },
  methods: {
    onCancel () {
      this.callback && this.callback('cancel', this)
    },
    onClickDispose (stateID) {
      let { user } = JSON.parse(localStorage.getItem('userInfo'))
      api.setState({ alarmID: this.data.alarmID, stateID, userID: user.id }).then(response => {
        if (response.data === 0) {
          this.$emit('close')
          this.$emit('input')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .detail-content {
    padding: 0 0.85rem;
  }
  .content-title {
    margin-bottom: 0.42rem;
    .title,
    .content {
      display: flex;
      color: #000;

      & > li {
        flex: 1;
        text-align: center;
        list-style: none;
      }
    }

    .title {
      font-size: 0.2rem;
    }
    .content {
      font-size: 0.3rem;
    }
    .line {
      height: 0.01rem;
      background: #E1E1E1;
      margin: 0.24rem 0;
    }
  }
  .content-video {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .video-item {
      flex: 1;
      min-width: 3.08rem;
      height: 1.75rem;
      margin-bottom: 0.14rem;
      background-color: #000;

      &:nth-child(2n) {
        margin-left: 0.14rem;
      }
    }
  }
  .dialog-footer {
    display: flex;
    justify-content: space-around;
    padding: 0.37rem 0.85rem 0.45rem 0.85rem;
    .ivu-btn {
      padding: 0.14rem 0.30rem;
      font-size: 0.2rem;
    }
  }
</style>
